<!--
 * name:地图
 * author:phx
 * date:2021.7.1
-->
<template>
    <div ref="myChart" id="myChart" style="width: 100%;height: 100%"></div>
</template>
<script>
    import '@/utils/china.js';
    import {geoCoordMap} from '@/utils/geoCoordMap';

    export default {
        name: 'mapIndex',
        props: {
            data: {
                type: Object,
                default() {
                    return {};
                },
            },
            dataByLocal: {
                type: Array,
                default() {
                  return [];
                },
            }
        },
        data: () => ({
            MapData: [], //这是两地的数据
            planePath: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
            color: ['#3ed4ff', '#ffa022', '#a6c84c'],
        }),
        mounted() {
            console.log('dataByLocal', this.dataByLocal);
            let ary = [];
            this.dataByLocal.map(item => {
                let _ary = [{name: '西安市', local: 'shanxi'}];
                _ary.push(item);
                ary.push(_ary)
            });
            this.MapData = ary;
            console.log('MapData', this.MapData);
            this.drawMap();
        },
        methods: {
            convertData(data) {
                let res = [];
                for (let i = 0; i < data.length; i++) {
                    let dataItem = data[i];

                    let fromCoord = geoCoordMap[dataItem[0].local];//始发地    山西西安
                    let toCoord = geoCoordMap[dataItem[1].local];//目的地
                    if (fromCoord && toCoord) {
                        res.push({
                            fromName: fromCoord.name,
                            toName: toCoord.name,
                            coords: [fromCoord.coord, toCoord.coord],//一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
                        });
                    }
                }
                return res;
            },
            seriesMap() {
                let series = [];
                [['', this.MapData]].forEach((item, i) => {
                    series.push({
                            type: 'lines',//用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
                            zlevel: 1,
                            effect: {//线特效的配置
                                show: true,
                                period: 6,//特效动画的时间
                                trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长。
                                color: '#fff',
                                symbolSize: 3,//特效标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示高和宽，例如 [20, 10] 表示标记宽为20，高为10。
                            },
                            lineStyle: {
                                normal: {
                                    color: this.color[i],
                                    width: 0,
                                    curveness: 0.2,//边的曲度，支持从 0 到 1 的值，值越大曲度越大
                                }
                            },
                            data: this.convertData(item[1])//线数据集。
                        },
                        {
                            type: 'lines',
                            zlevel: 2,
                            symbol: ['none', 'arrow'],//线两端的标记类型，可以是一个数组分别指定两端
                            symbolSize: 10,
                            effect: {
                                show: true,
                                period: 6,
                                trailLength: 0,
                                symbol: this.planePath,
                                symbolSize: 15
                            },
                            lineStyle: {
                                color: this.color[i],
                                width: 1.5,
                                opacity: 0.7,
                                curveness: 0.2
                            },
                            data: this.convertData(item[1])
                        },
                        {
                            type: 'effectScatter',//带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
                            coordinateSystem: 'geo',//该系列使用的坐标系
                            zlevel: 2,
                            rippleEffect: {//涟漪特效相关配置
                                brushType: 'stroke'
                            },
                            label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                                show: true,
                                position: 'right',
                                formatter: '{b}',
                                color: '#fff'
                            },
                            symbolSize: function (val) {//标记的大小
                                return val[2] / 15;
                            },
                            itemStyle: {
                                color: this.color[i]
                            },
                            data: item[1].map((dataItem) => {
                                return {
                                    name: geoCoordMap[dataItem[1].local].name,
                                    value: geoCoordMap[dataItem[1].local].coord.concat([dataItem[1].num])
                                };
                            })
                        });
                });
                return series;
            },
            drawMap() {
                const {myChart} = this.$refs;
                if (myChart) {
                    const thisChart = this.$echarts.init(myChart);
                    const option = {
                        tooltip: {
                            backgroundColor: "rgba(255,255,255,0.85)", //设置背景图片 rgba格式
                            color: "black",
                            borderWidth: "1", //边框宽度设置1
                            borderColor: "gray", //设置边框颜色
                            textStyle: {
                                color: "black" //设置文字颜色
                            },
                            formatter(param) {
                                return `${param.data.name}：${param.data.value[2]}台`;
                            },
                        },
                        label: {//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                            show: true,
                        },
                        geo: {
                            map: 'china',
                            roam: false,
                            zoom: 1.2,
                            center: [105, 36],
                            itemStyle: {
                                areaColor: '#0d0059',
                                borderColor: '#389dff',
                                borderWidth: 1, // 设置外层边框
                                shadowBlur: 5,
                                shadowOffsetY: 4,
                                shadowOffsetX: 0,
                                shadowColor: '#1a9ac4',
                            },
                        },
                        series: this.seriesMap(),
                    };
                    thisChart.setOption(option);
                    window.addEventListener('resize', () => {
                        thisChart.resize();
                    })
                }
            },
        },
    };
</script>
